@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
} 
html{
    font-size: 40px;
}
.web{
    >.content{
        margin: 0 auto;
        >.first{
            width: 85%;
            position: relative;
            padding: 0;
            margin: 0;
            padding-top: r(35);
            margin: 0 auto;
            margin-bottom: r(62);
            >.remen{
                padding-top: r(25);
                width: 40px;
                height: 97px;
                position: absolute;
                top: 0;
                left: 15px;
                text-align: center; 
                font-size: 20px;
                color: #ffffff;
                background: url(../img/youxi7.jpg);
            }
            >.row{
                margin: 0;
                padding: 0;
                >.col-sm-4{
                    margin: 0;
                    padding: 0;
                    >img{
                        width: 100%;
                    }
                }
                >.col-xs-12{
                    margin: 0;
                    padding: 0;
                    >p:nth-of-type(1){
                        color: #2a2a2a;
                        font-size: 30px;
                        text-align: right;
                        margin-bottom: 18px;
                    }
                    >p:last-of-type{
                        color: #898989;
                        font-size: 12px;
                        line-height: 30px;
                        text-align: right;
                        margin-bottom: r(30);
                    }
                    >ul{
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        >li{
                            width: 47%;
                            margin-bottom: r(30);
                            >img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        >.second{
            margin: 0 auto;
            margin-bottom: r(103);
            width: 85%;
            >.row{
                margin: 0;
                padding: 0;
                >.col-sm-4{
                    margin: 0;
                    padding: 0;
                    padding-top: r(28);
                    >img{
                        width: 100%;
                    }
                }
                >.col-xs-12{
                    margin: 0;
                    padding: 0;
                    >p:nth-of-type(1){
                        color: #2a2a2a;
                        font-size: 30px;
                        text-align: left;
                        margin-bottom: 18px;
                    }
                    >p:last-of-type{
                        color: #898989;
                        font-size: 12px;
                        line-height: 30px;
                        text-align: left;
                        margin-bottom: r(30);
                    }
                    >ul{
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        >li{
                            width: 47%;
                            margin-bottom: r(30);
                            >img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        >.third{
            width: 85%;
            margin: 0 auto;
            >p{
                color: #010101;
                font-size: 36px;
                margin-bottom: r(38);
            }
            >ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                >li{
                    margin-bottom: r(43);
                    width: 32%;
                    >.img{
                        position: relative;
                        margin-bottom: 12px;
                        overflow: hidden;
                        >img{
                            width: 100%;
                        }
                        >div{
                            width: 100%;
                            height: 100%;
                            top:0;
                            left: 0;
                            position: absolute;
                            padding: 13px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 4;
                            -webkit-box-orient: vertical;
//                          transform-origin:left top;
                            background-color: #000000;
                            opacity: 0.55;
                            color: white;
                            font-size: 12px;
                            transition: all .2s;
                            transform: translateX(-100%);
                        }
                    }
                    >p{
                        text-align: center;
                        font-size: 14px;
                        color: #2a2a2a;
                    }
                    >.img:hover>div{
                        transform: translateX(0);
                    }
                }
            }
        }
    }
}
@media(max-width:768px){
    .content{
        >.first{
            width: 92% !important;
            padding-top: 100px !important;
        }
        >.second{
             width: 92% !important;
        }
        >.third{
             width: 92% !important;
            >ul{
            >li{
                width: 48% !important;
            }
        }
        }
        
    }
}
